---
title: Keyboard Key
package: "@chakra-ui/layout"
image: "components/kbd.svg"
---

The `keyboard key` component exists to show which key or combination of keys
performs a given action.

The action itself should be further explained in accompanying content. It
renders a `<kbd>` element.

<ComponentLinks
  theme={{ componentName: "kbd" }}
  github={{ package: "layout" }}
  npm={{ package: "@chakra-ui/input" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Kbd } from "@chakra-ui/react"
```

```jsx
<span>
  <Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>
```

## Guideline

All shortcuts should do their best to match what appears on the user’s keyboard.

- All single letters A-Z are uppercase.
- For non-letter keys such as enter, esc and shift, stick to lowercase.
- Use the arrow symbol as opposed to spelling things out.

## Modifer

The only punctuation you should need is the **+** to indicate that a combination
of keys will activate the shortcut.

```jsx
<span>
  <Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>
```

For a sequence of keys where one must follow the other, write "then" in between.
Stick to lowercase to match the non-letter keys.

```jsx
<span>
  <Kbd>shift</Kbd> then <Kbd>H</Kbd>
</span>
```

If two different keys can execute the same action or the shortcut itself may
look different on the user’s keyboard, write "or" in between.

```jsx
<span>
  <Kbd>alt</Kbd> or <Kbd>option</Kbd>
</span>
```
